<template>
  <div class="citySlt" ref="citySlt" @scroll="scroll">
    <h2 class="title">城市定位页面</h2>

    <div
      class="cities"
      v-for="(cities, key) in allCity"
      :key="key"
      ref="cities"
    >
      <div class="letter">
        {{ key }}
      </div>

      <div class="city" v-for="(city, index) in cities" :key="index">
        {{ city.nm }}
      </div>
    </div>

    <div class="right">
      <div
        class="letter"
        @click="changeLetter(letter, index)"
        :class="{ red: index == num }"
        v-for="(letter, index) in letters"
        :key="index"
      >
        {{ letter }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  // name: "city",
  data() {
    return {
      allCity: null,
      letters: [],
      num: 0,
    };
  },
  methods: {
    // 滚动事件监听
    scroll(e) {
      let el = e.target;
      // 触底判断
      // if (el.scrollTop + el.clientHeight >= el.scrollHeight) {
      //   console.log("到底啦");
      // }

      // 滚动到哪个模块判断
      let cities = this.$refs.cities;
      // console.log("cities =>", cities);
      for (var i = 0; i < cities.length; i++) {
        // console.log("i =>", i);
        // console.log(cities[i].offsetTop);
        // console.log("el.scrollTop =>", el.scrollTop);

        // cities[i].scrollTop无效 ==> 脱离文档流，scrollTop无效果
        /* if (cities[i + 1] == undefined) {
          this.num = cities.length - 1
           console.log("超出");
          return;
        } */

        // console.log("没中断");
        if (
          cities[i + 1] != undefined &&
          cities[i].offsetTop <= el.scrollTop &&
          el.scrollTop < cities[i + 1].offsetTop
        ) {
          this.num = i;
          // console.log("num =>", this.num);
          break;
        } else {
          this.num = cities.length - 1;
        }
      }
    },

    getData() {
      this.axios.get("https://apis.netstart.cn/maoyan/cities.json").then((res) => {
        // 测试
        // console.log(this.cities)
        var newData = res.data.cts.sort(function (a, b) {
          if (a.py > b.py) {
            return 1;
          } else {
            return -1;
          }
        });

        let obj = {};
        newData.forEach((item) => {
          let zm = item.py.slice(0, 1).toLocaleUpperCase();
          this.letters.push(zm);
          if (!obj[zm]) {
            obj[zm] = [];
            //  console.log(obj.zm)
            obj[zm].push(item);
          } else {
            obj[zm].push(item);
          }
        });
        // 去重
        this.letters = [...new Set(this.letters)];
        this.allCity = obj;
        // console.log("allCity =>", this.allCity);
        // console.log("letters =>", this.letters);
      });
    },

    changeLetter(item, index) {
      console.log("参数 ==>", item, index);
      this.num = index;
      let el = this.$refs.citySlt;
      // el.scrollTop = this.$refs.cities[index].offsetTop;

      // 原生，有兼容问题
      el.scrollTo({
        top: this.$refs.cities[index].offsetTop,
        behavior: "smooth",
      });
    },
  },
  computed: {},
  created() {
    this.getData();
  },
};
</script>

<style scoped lang="less">
.citySlt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f0f0f0;
  overflow-y: auto;
  z-index: 99;
  .title {
    margin: 10px 0;
    font-size: 20px;
    color: #ee0a24;
    // font-weight: 600;
    text-align: center;
  }
  .cities > div {
    cursor: pointer;
    padding: 10px 0 10px 10px;
    border-bottom: 1px solid #cdcdcd;
  }
  .cities {
    font-size: 14px;
    .letter {
      font-weight: 550;
      font-size: 17px;
      padding: 20px 0 20px 10px;
    }
  }
  .right {
    cursor: pointer;
    position: fixed;
    right: 10px;
    top: 50px;
    .letter {
      font-size: 12px;
      padding: 2px 0;
      &.red {
        color: #ee0a24;
        font-weight: 600;
      }
    }
  }
}
</style>